<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2020筆順</title>
<meta name="description" content="SVG Drawing Animation" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>
<style type="text/css">
.logosvg-mask {
clip-path: url(#clipmask);
}
</style>
</head>
<svg class="logosvg-mask" id="canvas" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="400px" height="400px"
viewBox="0 0 400 400" xml:space="preserve">
<g id="Graylogo">
<svg> <!-- ここから↑上は上書き不要 -->
<!-- この下に 読みデータ 000 と コピー元字（グレー）データ 001 を貼付-->
<image id="_001" x="80" y="27" width="240" height="346" xlink:href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAeQB4AAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgF
BQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUE
BQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU
FBT/wAARCACLAGEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QA
tRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkK
FhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJ
ipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx
8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcF
BAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygp
KjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJma
oqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oA
DAMBAAIRAxEAPwD9U6QnApabIMow9QaAPKta+JGpy38osZVtrdWIQBFYsB3OQa6Lwh49TULaZNVn
hgmiwRIxChwfb1ry6UYkce5ptAHtM/jvQ7fO6/Vj6IrN/IVnz/FDSIs7FuJj/soB/M15NQAT0FAH
pE/xahXPk6c7+7yBf5A1nz/Fe/bPlWcEf+8S3+FcjBpV7c/6q0nk/wB2MmtCDwXrdxjbp0o/38L/
ADxQBen+JGuS52zxw/7kQ/rms6fxfrNxnfqM4z/cbb/KtOD4aa1L99IYf9+TP8s1owfCe7b/AF19
DH/uKW/woA4yXUbqc5luZpD6tITWr4f8X3+iXcbefJNbZG+F2yCO+M9DS+K/CU3heWAPMtxFMDtc
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
9KAIv+Fdt/z1Wiu6ooA//9k="/>
</g>
<svg id="canvas">
<!-- この下に 筆順データ 01～を貼付 -->
<path id="_01" fill="none" stroke="black" stroke-width="35" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="22.9256" d="M134.32 44.13c0.33,48 3.66,96 2.66,132.34 -1,36.33 -5.33,61 -9.5,83.83 -4.16,22.83 -11.16,43.83 -18.66,60.33 -7.5,16.5 -16.5,28.5 -25.5,40.5"/>
<path id="_02" fill="none" stroke="black" stroke-width="35" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="22.9256" d="M141.32 56.13c52,-5 107.99,-12 135.16,-12.83 27.17,-0.83 29.5,-0.5 30,5 0.5,5.5 -0.83,18.17 -1,66.17 -0.17,48 0.83,136.33 1,182.5 0.17,46.16 -0.5,50.16 -2.17,53.66 -1.66,3.5 -4.33,6.5 -16.83,4.84 -12.5,-1.67 -38.83,-8 -61.16,-14.34"/>
<path id="_03" fill="none" stroke="black" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="22.9256" d="M137.32 144c53,-4.67 106,-9.34 159,-14"/>
<path id="_04" fill="none" stroke="black" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="22.9256" d="M135.32 232c53.33,-4 106.66,-8 160,-12"/>
<!-- ここまで -->
</svg>
<svg width="400" height="300" style="position: absolute; top: 0; left: 0;">
<clipPath id="clipmask">
<!-- この下に 002Mask を貼付 -->
<path id="_002Mask" fill="#FF6600" fill-rule="nonzero" stroke="#FF6600" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="22.9256" d="M288.3 233.89l-140.83 10.21c-6.74,41.18 -17.71,74.23 -32.92,99.03 -4.72,7.77 -8.89,13.61 -12.43,17.49 -2.71,3.27 -5.84,4.94 -9.38,4.94 -2.71,0 -5.41,-0.98 -8.12,-2.85 -2.85,-1.95 -4.24,-4.52 -4.24,-7.78 0,-2.99 2.36,-8.4 7.09,-16.25 23.33,-39.72 35,-98.75 35,-177.01 0,-33.34 -0.7,-61.74 -2.02,-85.07 -0.69,-13.27 -1.04,-22.43 -1.04,-27.43 0,-11.53 5.35,-17.3 16.11,-17.3 8.82,0 13.82,4.24 15,12.78l136.11 -16.46c3.41,-0.41 6.11,-0.62 8.2,-0.62 16.52,0 24.79,8.68 24.79,26.04l0 293.82c0,5.42 -1.04,10.07 -3.06,14.03 -3.68,7.29 -9.58,10.97 -17.71,10.97 -14.51,0 -36.52,-6.25 -66.11,-18.68 -9.93,-4.24 -14.86,-8.26 -14.86,-12.22 0,-6.81 3.34,-10.21 10,-10.21 1.6,0 4.72,0.56 9.31,1.67 17.15,4.02 31.18,6.11 42.15,6.11 4.45,0 7.15,-1.32 8.13,-3.89 0.55,-1.46 0.83,-3.82 0.83,-6.95l0 -94.37zm0 -27.85l0 -61.46 -135.07 12.78c-0.14,21.74 -0.97,41.67 -2.5,59.86l137.57 -11.18zm0 -89.51l0 -49.66c0,-6.52 -2.92,-9.79 -8.75,-9.79 -1.25,0 -2.64,0.07 -4.31,0.21l-123.68 15.07 0.63 22.78c0.41,14.51 0.69,26.39 0.83,35.62l135.28 -14.23z"/>
</g>
<!--
<polygon id="_003Mask" fill="none" stroke="#CCCCCC" stroke-width="0.9" stroke-miterlimit="22.9256" points="1.32,391.13 400.32,391.13 400.32,499.13 1.32,499.13 "/> -->
</svg>
<!--筆記アニメ（svgLINE文字を書き順する script） duration: の数字は文字によって変更 -->
<script>
new Vivus('canvas', {start: 'autostart', type: 'oneByOne', duration: 800});
</script>
</DIV></body>
</html>